<template>
  <div>
    <PlutoTablePrint2
      ref="refPlutoTable"
      :columns="systemTable.columns"
      :table-data="systemTable.tableData"
      :total="systemTable.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @search="handleFilter"
      @selection-change="handleSelectionChange"
      :show-selection="true"
      :show-pagination="true"
      :page-sizes="[5, 10,20, 50,100]"
      :default-page-size="systemTable.filterParams.pageSize"
      :show-index="true"
      @add="handleAddAction"
      :add-button-text="'立案登记'"
    >
      <!-- 自定义操作列 -->
      <template v-slot:action="scope">
        <!--        <el-button @click="handleDetail(scope.row)" size="mini" type="primary" icon="el-icon-edit" circle></el-button>-->

        <span @click="handleDetail(scope.row)" style="color: #2979E6;cursor: pointer; margin-right: 10px"> 详情</span>
        <span @click="handleDetail(scope.row)" style="color: #2979E6;cursor: pointer; "> 处理</span>

      </template>
    </PlutoTablePrint2>


    <PlutoDialog
      :visible.sync="dialogFormVisible"
      :config="dialogConfig"
      @confirm="handleConfirmConfigAction"
    >


      <!--      style="width: 100%;border-bottom: 1px solid #000000"-->
      <template v-slot:content>
        <el-form ref="registerForm" :model="registerForm">
          <p style="text-align: center;"><strong><span style="font-family: SimHei, sans-serif; font-size: 18px;"
                                                       data-v-3bc5a245="">重庆市司法局</span></strong></p>
          <p style="text-align: center;"><strong><span style="font-family: SimHei, sans-serif; font-size: 18px;"
                                                       data-v-3bc5a245="">立案审批表</span></strong></p>
          <table width="595px" height="807.203125px" border="1"
                 style="width: 100%; height: 501.203px; margin-right: auto; margin-left: auto; border-collapse: collapse;"
                 class="custom-table">
            <tbody>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 办案条线</span>
              </td>
              <td style="width: 76.936%; height: 22.3906px; text-align: center;" colspan="4">
                <el-select class="custom-select" v-model="registerForm.lineCode" placeholder="请选择办案条线">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </td>
            </tr>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"> <span style="color: #e03e2d;">*</span> 案件来源</span>
              </td>
              <td style="width: 76.936%; height: 22.3906px;" colspan="4">
                <el-select class="custom-select" v-model="registerForm.caseSource" placeholder="请选择案件来源">
                  <el-option label="巡查中发现" value="shanghai"></el-option>
                  <el-option label="社会举报" value="beijing"></el-option>
                </el-select>
              </td>
            </tr>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"> <span style="color: #e03e2d;">*</span> 发现日期</span>
              </td>
              <td style="width: 76.936%; height: 22.3906px;" colspan="4">
                <el-date-picker class="custom-select" v-model="registerForm.discoveryDate" type="date"
                                format="yyyy年MM月dd日" value-format="yyyy-MM-dd"
                                placeholder="请选择发现日期"></el-date-picker>
              </td>
            </tr>
            <tr style="height: 22.3906px; text-align: center;" v-for="(item, index) in registerForm.publishItems"
                :key="index">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2">
                <p style="text-align: center;">
      <span style="font-family: SimHei, sans-serif; font-size: 16px;">
        <span style="color: #e03e2d;">*</span> 处罚事项{{ index + 1 }}
      </span>
                  <i
                    style="cursor: pointer;   color: #e03e2d;font-size: 18px;"
                    class="el-icon-remove"
                    @click="removePublishItemAction(index)"
                    v-if="registerForm.publishItems.length > 1 && index !== 0"
                  ></i>

                  <i style="cursor: pointer;  font-size: 18px;"
                     @click="addPublishItemAction(index)"
                     v-if="index === 0"
                     class="el-icon-circle-plus"></i>
                </p>
              </td>
              <td style="width: 76.936%; height: 22.3906px;" colspan="4">
                <el-input class="custom-select" v-model="item.itemName" placeholder="请输入处罚事项"></el-input>
              </td>
            </tr>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 案发地</span>
              </td>
              <td style="width: 34.1762%; height: 22.3906px;" colspan="2">
                <el-input class="custom-select" v-model="registerForm.caseArea" placeholder="请输入"></el-input>
              </td>
              <td style="width: 42.7598%; height: 22.3906px;" colspan="2">
                <el-input class="custom-select" v-model="registerForm.caseDetail" placeholder="请输入"></el-input>
              </td>
            </tr>
            <template v-for="(item, index) in partyPersonListAction">
              <tr style="height: 22.3906px; text-align: center;" :key="`person-${index}-1`">
                <td style="width: 11.7845%; height: 389.25px;" v-if="index === 0"
                    :rowspan="6 + (partyPersonListAction.length * 5)">
                  <p style="text-align: center;"><span style="font-size: 16px; color: #e03e2d;">*</span></p>
                  <p style="text-align: center;"><span style="font-size: 16px;">当</span></p>
                  <p style="text-align: center;"><span style="font-size: 16px;">事</span></p>
                  <p style="text-align: center;"><span style="font-size: 16px;">人</span></p>
                </td>
                <td style="width: 11.2795%; height: 111.953px;" rowspan="5">
                  <p style="text-align: center;"><span style="font-size: 16px;">个人</span></p>
                  <p style="text-align: center;"><span style="font-size: 16px;"> </span>
                    <i
                      style="cursor: pointer;  color: #e03e2d;font-size: 18px;"
                      class="el-icon-remove"
                      @click="removePersonAction(index)"
                      v-if="partyPersonListAction.length > 1 && index !== 0"
                    ></i>
                    <i style="cursor: pointer; font-size: 18px;"
                       @click="addPersonAction(index)"
                       v-if="index === 0"
                       class="el-icon-circle-plus"></i>
                  </p>
                </td>
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">证件类型</span></td>
                <td style="width: 20.0348%; height: 22.3906px;">
                  <el-select class="custom-select" v-model="item.personIdCardType" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </td>
                <td style="width: 13.6352%; height: 22.3906px;"><span style="font-size: 16px;">证件号码</span></td>
                <td style="width: 29.1246%; height: 22.3906px;">
                  <el-input class="custom-select" v-model="item.personIdCardNumber" placeholder="请输入"></el-input>
                </td>
              </tr>


              <tr style="height: 22.3906px; text-align: center;" :key="`person-${index}-2`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">姓名</span></td>
                <td style="width: 20.0348%; height: 22.3906px;">
                  <el-input class="custom-select" v-model="item.partyName" placeholder="请输入"></el-input>
                </td>
                <td style="width: 13.6352%; height: 22.3906px;"><span style="font-size: 16px;">出生年月</span></td>
                <td style="width: 29.1246%; height: 22.3906px;">
                  <el-date-picker class="custom-select" v-model="item.personBirthDate" type="date"
                                  format="yyyy年MM月dd日"
                                  value-format="yyyy-MM-dd" placeholder="请选择"></el-date-picker>
                </td>
              </tr>
              <tr style="height: 22.3906px; text-align: center;" :key="`person-${index}-3`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">性别</span></td>
                <td style="width: 20.0348%; height: 22.3906px;">
                  <el-select class="custom-select" v-model="item.personGender" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </td>
                <td style="width: 13.6352%; height: 22.3906px;"><span style="font-size: 16px;">联系电话</span></td>
                <td style="width: 29.1246%; height: 22.3906px;">
                  <el-input class="custom-select" v-model="item.partyPhone" placeholder="请输入"></el-input>
                </td>
              </tr>


              <tr style="height: 22.3906px; text-align: center;" :key="`person-${index}-4`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">住址</span></td>
                <td style="width: 20.0348%; height: 22.3906px;">
                  <el-input class="custom-select" v-model="item.partyAddress" placeholder="请输入"></el-input>
                </td>
                <td style="width: 13.6352%; height: 22.3906px;"><span style="font-size: 16px;">详细地址</span></td>
                <td style="width: 29.1246%; height: 22.3906px;">
                  <el-input class="custom-select" v-model="item.partyDetailAddress" placeholder="请输入"></el-input>
                </td>
              </tr>
              <tr style="height: 22.3906px; text-align: center;" :key="`person-${index}-5`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">工作单位</span></td>
                <td style="width: 62.7946%; height: 22.3906px;" colspan="3">
                  <el-input class="custom-select" v-model="item.personWorkUnit" placeholder="请输入"></el-input>
                </td>
              </tr>
            </template>


            <template v-for="(item, index) in partyLegalListAction">
              <tr style="height: 22.3906px; text-align: center;" :key="`legal-${index}-1`">
                <td style="width: 11.2795%; height: 277.297px;" rowspan="6">
                  <p style="text-align: center;"><span style="font-size: 16px;">单位</span></p>
                </td>
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">名称</span></td>
                <td style="width: 62.7946%; height: 22.3906px;" colspan="3">
                  <el-input class="custom-select" v-model="item.partyName"
                            placeholder="请输入单位名称"></el-input>
                </td>
              </tr>
              <tr style="height: 40.7812px; text-align: center;" :key="`legal-${index}-2`">
                <td style="width: 14.1414%; height: 40.7812px;">
                     <span style="font-size: 16px;">法定代表人或负责人</span>
                 </td>
                <td style="width: 20.0348%; height: 40.7812px;">
                  <el-input class="custom-select" v-model="item.legalRepresentative" placeholder="请输入"></el-input>
                </td>
                <td style="width: 13.6352%; height: 40.7812px;"><span style="font-size: 16px;">职务</span></td>
                <td style="width: 29.1246%; height: 40.7812px;">
                  <el-input class="custom-select" v-model="item.legalPosition" placeholder="请输入"></el-input>
                </td>
              </tr>
              <tr style="height: 50.1719px; text-align: center;" :key="`legal-${index}-3`">
                <td style="width: 14.1414%; height: 50.1719px;">
                  <span style="font-size: 16px;">法定代表人或负责人证件</span>
                </td>
                <td style="width: 20.0348%; height: 50.1719px;">
                  <el-select class="custom-select" v-model="item.lineCode" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </td>
                <td style="width: 13.6352%; height: 50.1719px;"><span style="font-size: 16px;">证件号码</span></td>
                <td style="width: 29.1246%; height: 50.1719px;">
                  <el-input class="custom-select" v-model="item.legalIdCardType" placeholder="请输入"></el-input>
                </td>
              </tr>
              <tr style="height: 40.7812px; text-align: center;" :key="`legal-${index}-4`">
                <td style="width: 14.1414%; height: 40.7812px;">
                 <span style="font-size: 16px;">统一社会信用代码</span>
                </td>
                <td style="width: 20.0348%; height: 40.7812px;">
                  <el-input class="custom-select" v-model="item.legalUniCode" placeholder="请输入"></el-input>
                </td>


                <td style="width: 13.6352%; height: 40.7812px;"><span style="font-size: 16px;">联系电话</span></td>
                <td style="width: 29.1246%; height: 40.7812px;">
                  <el-input class="custom-select" v-model="item.partyPhone" placeholder="联系电话"></el-input>
                </td>
              </tr>
              <tr style="height: 22.3906px; text-align: center;" :key="`legal-${index}-5`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">住所</span></td>
                <td style="width: 62.7946%; height: 22.3906px;" colspan="3">
                  <el-input class="custom-select" v-model="item.partyDetailAddress" placeholder="住所"></el-input>
                </td>
              </tr>
              <tr style="height: 22.3906px; text-align: center;" :key="`legal-${index}-6`">
                <td style="width: 14.1414%; height: 22.3906px;"><span style="font-size: 16px;">单位类型</span></td>
                <td style="width: 62.7946%; height: 22.3906px;" colspan="3">
                  <el-radio v-model="item.legalUnitType" label="1">法人</el-radio>
                  <el-radio v-model="item.legalUnitType" label="2">个体工商户</el-radio>
                  <el-radio v-model="item.legalUnitType" label="3">其他组织</el-radio>
                </td>
              </tr>
            </template>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2"><span
                style="font-family: SimHei, sans-serif; font-size: 16px;"><span style="color: #e03e2d;">*</span> 案件名称</span>
              </td>
              <td style="width: 76.936%; height: 22.3906px; text-align: center;" colspan="4">
                <el-input type="textarea" maxlength="300" :rows="3" show-word-limit="" class="custom-select"
                          v-model="registerForm.caseName" placeholder="请输入案件名称"></el-input>
              </td>
            </tr>
            <tr style="height: 22.3906px; text-align: center;">
              <td style="width: 23.064%; height: 22.3906px; text-align: center;" colspan="2">
                <p><span style="color: #e03e2d;">*</span> <span> 请输入案件</span></p>
                <p><span>简要情况</span></p>
              </td>
              <td style="width: 76.936%; height: 22.3906px; text-align: center;" colspan="4">
                <el-input type="textarea" maxlength="5000" :rows="4" show-word-limit="" class="custom-select"
                          v-model="registerForm.caseDesc" placeholder="请输入案件简要情况"></el-input>
              </td>
            </tr>
            </tbody>
          </table>
        </el-form>
      </template>
    </PlutoDialog>


  </div>
</template>

<script>
import PlutoTablePrint2 from "@/components/PlutoTablePrint/PlutoTablePrint2.vue";
import * as api from './api'
import PlutoDialog from "@/components/PlutoDialog/PlutoDialog.vue";

export default {
  components: {
    PlutoDialog,
    PlutoTablePrint2
  },
  data() {
    return {
      radio: 1,
      registerForm: {
        lineCode: '',
        caseSource: '',
        discoveryDate: '',
        publishItems: [{"itemName": "", "illegalBasis": "", "publishBasis": ""}],
        caseArea: '',
        caseDetail: '',
        caseName: '',
        caseDesc: '',
        partyList: [],
      },
      dialogFormVisible: true,
      dialogConfig: {
        title: '立案审批表',
        width: '850px',
        contentHeight: '750',
        top: '20px'
      },

      systemTable: {
        title: '案件管理',
        columns: [
          {prop: 'uid', label: '案件uid', width: '240', isSearch: true, type: 'input'},
          {prop: 'caseName', label: '案件名称', isSearch: true, type: 'input'},
          {prop: 'caseNumber', label: '案件编号', isSearch: false, type: 'input'},
          {
            prop: 'type',
            label: '案件类型',
            isSearch: true,
            type: 'select',
            dataSource: [
              {key: '1', value: '简易程序'},
              {key: '2', value: '普通程序'}
            ]
          },
          {prop: 'createTime', label: '创建时间', isSearch: true, type: 'date', width: '140'},
          {prop: 'updateTime', label: '编辑时间', isSearch: true, type: 'date_interval', width: '140'},
          {
            prop: 'action',
            label: '操作',
            width: '100',
            align: 'center',
            slot: 'action'
          }
        ],
        tableData: [],
        total: 0,
        filterParams: {
          pageNum: 1,
          pageSize: 5,
        }

      },
    }
  },
  computed: {
    partyLegalListAction() {
      const partyLegalList = this.registerForm.partyList.filter(item => item.partyType === '2');
      if (partyLegalList.length === 0) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.registerForm.partyList.push(this.createEmptyParty('2'));
        return this.registerForm.partyList.filter(item => item.partyType === '2');
      }
      return partyLegalList;
    },
    partyPersonListAction() {
      const partyPersonList = this.registerForm.partyList.filter(item => item.partyType === '1');
      if (partyPersonList.length === 0) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.registerForm.partyList.push(this.createEmptyParty('1'));
        return this.registerForm.partyList.filter(item => item.partyType === '1');
      }
      return partyPersonList;
    }

  },
  mounted() {
    this.pageTableAndColumList();
  },
  methods: {
    createEmptyParty(partyType) {
      return {
        uid: "",
        caseId: "",
        partyType: partyType,
        partyName: "",
        partyPhone: "",
        partyAddress: "",
        partyDetailAddress: "",
        personIdCardType: "",
        personIdCardNumber: "",
        personBirthDate: null,
        personGender: '',
        personWorkUnit: "",
        legalRepresentative: "",
        legalPosition: "",
        legalIdCardType: "",
        legalIdCardNumber: "",
        legalUniCode: "",
        legalUnitType: "1",
      };
    },


    handleAddAction() {
      console.log('新增案件')
    },
    // 分页大小变化
    handleSizeChange(requestParams) {
      this.systemTable.filterParams.pageSize = requestParams.pageSize;
      this.systemTable.filterParams.pageNum = 1;
      this.pageTableAndColumList();
    },
    // 当前页变化
    handleCurrentChange(requestParams) {
      console.log(requestParams)
      this.systemTable.filterParams.pageNum = requestParams.pageNum;
      this.pageTableAndColumList();
    },
    handleSelectionChange(selection) {
      console.log('选中的数据:', selection);
      // 处理选中的数据
    },

    // 筛选处理
    handleFilter(requestParams) {
      console.log(requestParams)
      this.systemTable.filterParams = {
        ...this.systemTable.filterParams,
        ...requestParams
      };
      this.systemTable.filterParams.pageNum = 1;
      this.pageTableAndColumList();
    },
    handleDetail(row) {
      // 新标签页打开
      const routeData = this.$router.resolve({
        path: '/case/detail',
        query: {uid: row.uid}
      });
      window.open(routeData.href, '_blank');
    },


    pageTableAndColumList() {
      console.log(this.systemTable.filterParams)
      api.pageList(this.systemTable.filterParams).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.systemTable.tableData = res.data.list;
          this.systemTable.total = res.data.total;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    // 添加处罚事项
    addPublishItemAction() {
      this.registerForm.publishItems.push({"itemName": "", "illegalBasis": "", "publishBasis": ""});
    },
    // 删除处罚事项
    removePublishItemAction(index) {
      this.registerForm.publishItems.splice(index, 1);
    },

    addPersonAction() {
      this.registerForm.partyList.push(this.createEmptyParty('1'));
    },
    removePersonAction(index) {
      this.registerForm.partyList.splice(index, 1);
    },


    handleConfirmConfigAction() {

    }

  }
}
</script>

<style scoped>


.custom-table td {
  padding:  10px 5px;
  vertical-align: middle;
}


.custom-select {
  cursor: pointer;
  color: #000000;
  border: none !important;
  width: 100%;
}

.custom-select ::v-deep .el-input__inner {
  border: none !important;
  border-bottom: 1px solid #000 !important;
  border-radius: 0 !important;
  background: transparent;
}

.custom-select ::v-deep .el-input.is-focus .el-input__inner {
  border-bottom: 1px solid #000 !important;
  box-shadow: none !important;
  outline: none !important;
}

.custom-select ::v-deep .el-input__inner:hover {
  border-bottom: 1px solid #000 !important;
}


/* 隐藏标题栏 */
.no-header-dialog .el-dialog__header {
  display: none !important;
}

/* 调整内容区域的上边距 */
.no-header-dialog .el-dialog__body {
  padding-top: 20px !important;
}

.custom-dialog .el-dialog__body {
  padding: 10px 20px;
}

.custom-dialog .el-dialog__footer {
  padding: 0;
}

</style>
